<template>
	<view class="page">
		<!-- 就诊卡信息 -->
		<view class="PatientIDCard">
			<view class="people">
				<view class="name">
					{{userInfo.name}}<text style="font-size: 24rpx;margin-left: 10rpx;">(本人)</text>
				</view>
				<view class="register_code">
					登记号：{{userInfo.Medical_number}}
				</view>
			</view>
			<view class="Vrcode">
				<image  style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84/u7436.svg" mode="widthFix"></image>
			</view>
		</view>
		<view class="PatientIDCard" v-for="(item,index) in familys" :key="index">
			<view class="people">
				<view class="name">
					{{item.name}}<text style="font-size: 24rpx;margin-left: 10rpx;">(朋友)</text>
				</view>
				<view class="register_code">
					登记号：{{item.mecaidal_number}}
				</view>
			</view>
			<view class="Vrcode">
				<image  style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84/u7436.svg" mode="widthFix"></image>
			</view>
		</view>
		<button class="add" @click="add">添  加</button>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	import { reactive, ref } from 'vue'
	const userInfo = ref({})
	const familys = reactive([])
	onLoad((option)=> {
		onLoad(()=>{
			console.log(uni.getStorageSync('userid'))
			api('/appselectid',{
				userid:uni.getStorageSync('userid')
			}).then(res=>{
				// console.log(res.data[0])
				userInfo.value = res.data[0]
			}).catch(err=>{
				console.log(err)
			})
			api('/appfamily',{
				userid:uni.getStorageSync('userid')
			}).then(res=>{
				// console.log(res)
				familys.push(...res)
			}).catch(err=>{
				console.log(err)
			})
		})
	})
	// 添加就诊人
	const add = () => {
		uni.navigateTo({
			url:'/pages/Add_patient/Add_patient'
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		.PatientIDCard{
			 width: 100%;
			 height: 174rpx;
			 padding: 34rpx 40rpx;
			 margin-bottom: 30rpx;
			 box-sizing: border-box;
			 background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84/u7431.svg');
			 background-size: cover;
			 display: flex;
			 justify-content: space-between;
			 .people{
				 font-family: 'Microsoft YaHei UI', sans-serif;
				 color: #fff;
				 font-size: 24rpx;
				 .name{
					 font-size: 32rpx;
				 }
				 .register_code{
					 margin-top: 22rpx;
				 }
			 }
			 .Vrcode{
				 width: 90rpx;
				 height: 90rpx;
				 border-radius: 16rpx;
				 background-color: #fff;
				 display: flex;
				 align-items: center;
				 justify-content: center;
			 }
		}
		.add{
			height: 80rpx;
			line-height: 80rpx;
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-size: 28rpx;
			color: #fff;
			background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%A1%AE%E8%AE%A4/u2184.svg');
			background-size: cover;
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			right: 40rpx;
		}
	}       
</style>
